CONTENTS 01
02
03
04
05
06
프로젝트 개요 및 팀 구성
UI/UX 설계
UI/UX 디자인
구현 및 개발
프로젝트 수행 결과
자체평가 및 의견
01. 프로젝트 개요 및 팀 구성
DEBEC DEPARTMENTSTORE
1-1 팀 구성 및 역할
백주현 기획 및 설계, UI/UX 디자인
남예린 기획 및 설계, UI/UX 디자인
윤형진 퍼블리싱 및 자바스크립트
방선영 기획 및 설계, 자바스크립트 및 OPEN API 개발
정연진 UI/UX 디자인, 퍼블리싱,
자바스크립트 및 OPEN API 개발 팀장
01. 프로젝트 개요 및 팀 구성
DEBEC DEPARTMENTSTORE
1-2 개발언어 및 툴
01. 프로젝트 개요 및 팀 구성
DEBEC DEPARTMENTSTORE
1-3 개발 기간 및 개발 일정
10
월
11
일
~ 11
월
8
일개발
기간
개발
일정
주제선정및기획
대백홈페이지분석
스토리보드제작
UI/UX디자인
퍼블리싱(메인)
JavaScript구현(메인)
UI/UX디자인수정및보완
퍼블리싱(서브)
JavaScript구현(서브)
OPENAPI활용
(인스타그램계정연동)
전체수정및보완
보고서용PPT제작
1주차
2주차
3주차
4주차
5주차
01. 프로젝트 개요 및 팀 구성
DEBEC DEPARTMENTSTORE
§대구백화점의위상
-1944년대구상회로시작하여1962년합자회사로설립했으며,1969년12월26일주식회사대구백화점으로전환
-2010년부터유명명품브랜드들이입점하며고급백화점으로서입지를더욱단단히하게됨
§대구백화점홈페이지취약점
-대구를대표하는백화점이라는명성에비해기존의홈페이지는단순,이용자들의흥미유발부족
§대구백화점홈페이지리뉴얼기획
-모바일버전과PC버전이나눠져있는기존홈페이지를반응형홈페이지로통합제작
-동적인요소를추가하여이용자의흥미증가
-백화점의 고급스러운 이미지와 트렌드에 맞는 홈페이지 제작
01. 프로젝트 개요 및 팀 구성
1-4 주제 및 기획의도
DEBEC DEPARTMENTSTORE
§모바일쇼핑이용자의증가
-모바일쇼핑이용률이PC쇼핑이용률보다높은것으로조사됨
-10대부터40대까지모든이용자들이PC보다모바일쇼핑을더선호
-PC이용률이높은50대에서도차이는 근소
[출처] 아시아 경제
01. 프로젝트 개요 및 팀 구성
§모바일이용자증가
-2013년에스마트폰보유율이 PC보유율추월,현재까지증가추세
-스마트폰이PC를대체하면서쇼핑추세도모바일쇼핑으로전환
1-4 주제 및 기획의도
DEBEC DEPARTMENTSTORE
§반응형홈페이지의필요성
-모바일쇼핑이용률이점점증가하고있는추세에따라기업들은이에대응해야함
-모바일환경에서접속하는이용자들을잡기위해반응형홈페이지는 더이상선택이아닌필수적요소
-반응형홈페이지를통해웹사이트를이용하는사람들에게모든기기에서최적화된환경을제공
-사용자들의만족도향상
-사용자들은홈페이지를쉽게따라갈수있을때그페이지에더오래머뭄
-그결과재방문또는구매나예약으로이어짐
01. 프로젝트 개요 및 팀 구성
반응형웹은사용자의만족도와마케팅을동시에촉진할수있는좋은방법
1-5 활용방안 및 기대효과
DEBEC DEPARTMENTSTORE
- 첫 화면에 보이는 메뉴들이 많다.
-홈페이지폼, 버튼이 작아 가독성이떨어짐
반응형
-PC버전과 모바일 버전이 따로 존재
헤더
컨텐츠
-단순한디자인
-프로모션 캐러셀 외엔 정적인 홈페이지
01. 프로젝트 개요 및 팀 구성
1-6 홈페이지 분석
DEBEC DEPARTMENTSTORE
크몽
신세계 백화점
01. 프로젝트 개요 및 팀 구성
1-7 벤치마킹
02. UI/UX 설계
DEBEC DEPARTMENTSTORE
2-1 네비게이션 설계
M
이용안내 문화ZONE 상품권 카드멤버십
메인페이지
오시는길
지점안내
층별안내
편의시설
전자쿠폰안내
멤버십안내
포인트안내
카드소개
오시는길
주차권안내
사용장소
상품권소개
구입안내
발권안내
제휴점문의
제휴상품권
회원가입 로그인 고객센터
GNB 토글메뉴
02. UI/UX 설계
DEBEC DEPARTMENTSTORE
M메인페이지
이용안내 공지사항 이벤트 쇼핑뉴스
토글메뉴
D-Style
문화센터 갤러리
프라임홀 레오문화홀 아트
&
컬쳐
소식 대백상품권 법인영업 카드
멤버십 바로가기
지점안내
층별안내
편의시설
오시는길
공지사항 이벤트
담청자
발표
쇼핑정보
DM
Tax Free Info
Only-D
해외직수입
문화센터소개
수강신청
검색
수강관리
추천
.
신설강좌
갤러리
소개
전시안내
전시검색
대관안내
행사일정
프라임홀소개
대관안내
문화홀소개
공연일정
아트
&
컬쳐
소식
상품권
소개
구입안내
발권안내
사용장소
제휴상품권
제휴점
문의
Only-D
해외직수입
대백몰
대백특판
멤버십
안내
포인트안내
카드소개
카드소개
전자쿠폰
안내
VIP CLUB
2-1 네비게이션 설계
02. UI/UX 설계
DEBEC DEPARTMENTSTORE
메인/서브 페이지
-PC와 Mobile 기본 제공
-자연스러운 반응형 웹 구현을 위해 중단점 상세 설계
PC
1250px 950px, 850px, 800px
Mobile
550px,500px, 450px
768px
02. UI/UX 설계
2-2 중단점 설계
DEBEC DEPARTMENTSTORE
PC M
메인 페이지
02. UI/UX 설계
2-3 와이어프레임
DEBEC DEPARTMENTSTORE
서브 페이지
02. UI/UX 설계
PC M
2-3 와이어프레임
DEBEC DEPARTMENTSTORE
카드멤버쉽 클릭시 서브페이지 이동
공지사항 위로 자동 슬라이더
로그인 버튼 클릭시 로그인창 Drop down
햄버거 토글 클릭시 전체 메뉴 띄우기
프로모션 캐러셀
PC(메인 페이지)
2-4 스토리 보드
02. UI/UX 설계
1
2
3
4
5
DEBEC DEPARTMENTSTORE
광고 이미지 클릭 시 Instagram 연동
PC(서브 페이지)
2-4 스토리 보드
02. UI/UX 설계
6
Instagram 광고 홈페이지
자동 업데이트
DEBEC DEPARTMENTSTORE
카드 이미지 hover시
회전되면서 카드 혜택 표시
토글메뉴 클릭시 전체메뉴 Drop Down
프로모션 캐러셀
메인페이지 서브페이지
MOBILE(메인 및 서브)
2-4 스토리 보드
02. UI/UX 설계
1
1
2
DEBEC DEPARTMENTSTORE
2-5 스타일 가이드
02. UI/UX 설계
03. UI/UX 디자인
DEBEC DEPARTMENTSTORE
3-1 UI 디자인 프로토타입
03. UI/UX 디자인
768px
PC M
DEBEC DEPARTMENTSTORE
PC (메인 페이지)
대구 백화점 반응형 웹구현
3-1 UI 디자인
03. UI/UX 디자인
DEBEC DEPARTMENTSTORE
PC (서브 페이지)
3-1 UI 디자인
03. UI/UX 디자인
DEBEC DEPARTMENTSTORE
자세히 보기 클릭
PC (서브 페이지)
3-1 UI 디자인
마우스 hover
03. UI/UX 디자인
DEBEC DEPARTMENTSTORE
달력 팝업 메인 페이지 로그인 창 Drop down
PC (달력 팝업 및 로그인)
3-1 UI 디자인
03. UI/UX 디자인
DEBEC DEPARTMENTSTORE
PC (전체 메뉴)
3-1 UI 디자인
03. UI/UX 디자인
DEBEC DEPARTMENTSTORE
PC (회원가입 및 로그인 페이지)
3-1 UI 디자인
03. UI/UX 디자인
DEBEC DEPARTMENTSTORE
MOBILE (메인 페이지)
3-1 UI 디자인
03. UI/UX 디자인
DEBEC DEPARTMENTSTORE
MOBILE (서브 페이지)
3-1 UI 디자인
03. UI/UX 디자인
DEBEC DEPARTMENTSTORE
3-1 UI 디자인 MOBILE (메뉴 및 로그인)
03. UI/UX 디자인
DEBEC DEPARTMENTSTORE
3-1 UI 디자인
03. UI/UX 디자인
3-1 UI 디자인
03. UI/UX 디자인
DEBEC DEPARTMENTSTORE
3-1 UI 디자인
03. UI/UX 디자인
04. 구현 및 개발
DEBEC DEPARTMENTSTORE
768px
PC M
4-1 반응형 웹 구현 (HTML, CSS)
04. 구현 및 개발
DEBEC DEPARTMENTSTORE
950px 이하 해상도에서 슬라이드 뉴스 숨김
PC
04. 구현 및 개발
4-1 반응형 웹 구현 (HTML, CSS)
DEBEC DEPARTMENTSTORE
PC
800px 이하부터 검색 창 숨김
850px 이하부터 레이아웃 변경
PC
04. 구현 및 개발
4-1 반응형 웹 구현 (HTML, CSS)
DEBEC DEPARTMENTSTORE
PC M
768px 이하부터 모바일 맞춤 레이아웃으로 변경
M
04. 구현 및 개발
4-1 반응형 웹 구현 (HTML, CSS)
DEBEC DEPARTMENTSTORE
PC M
M
04. 구현 및 개발
4-1 반응형 웹 구현 (HTML, CSS)
DEBEC DEPARTMENTSTORE
PC M
4-2 동적 기능 구현 (JavaScript, jQuery)
로그인 버튼 눌렀을 때,
로그인 창이 슬라이드 되어 내려옴
슬라이드 창 구현1 PC
slideToggle 메소드 사용으로 슬라이드 효과 표현
04. 구현 및 개발
DEBEC DEPARTMENTSTORE
PC M
모바일 환경에서 상위 메뉴 버튼 눌렀을 때,
하위 메뉴가 슬라이드 되어 내려옴
슬라이드 창 구현2 Mobile
slideToggle, slideUp 메소드 사용으로
슬라이드 효과 표현
반복문으로 모든 메뉴에 대해 슬라이드 효과 적용
04. 구현 및 개발
4-2 동적 기능 구현 (JavaScript, jQuery)
DEBEC DEPARTMENTSTORE
PC M
비밀번호 텍스트 확인
04. 구현 및 개발
4-2 동적 기능 구현 (JavaScript, jQuery)
DEBEC DEPARTMENTSTORE
M
인스타그램 API 사용하여 게시물 자동 업로드
인스타그램 API 연결
04. 구현 및 개발
4-3 API 기능 구현 (Instagram API)
DEBEC DEPARTMENTSTORE
M
서비스 서버가 인증 서버로부터 인가 코드 받기를 요청
STEP1. 인가코드 받기
04. 구현 및 개발
4-3 API 기능 구현 (Login API)
DEBEC DEPARTMENTSTORE
인증 서버가 사용자에게 계정 로그인을 통한 인증 요청
STEP1. 인가코드 받기
04. 구현 및 개발
4-3 API 기능 구현 (Login API)
인증 서버가 사용자에게
동의 화면을 출력하여 인
가를 위한 사용자 동의를
요청
모든 필수 동의 항목에 동의하고
[동의하고 계속하기] 버튼을 누른 경우
Redirect uri(여기서는 sociallogin.php)로
인가 코드를 담은 쿼리 스트링 전달
DEBEC DEPARTMENTSTORE
M
서비스 서버가 Redirect URI로 전달받은 인가코드로 토큰 받기를 요청 (getTokenModel)
STEP2. 토큰 받기
04. 구현 및 개발
4-3 API 기능 구현 (Login API)
DEBEC DEPARTMENTSTORE
M
인증 서버가 토큰을 발급해 서비스 서버에 전달
STEP2. 토큰 받기
04. 구현 및 개발
4-3 API 기능 구현 (Login API)
DEBEC DEPARTMENTSTORE
M
서비스 서버가 발급 받은 액세스 토큰으로 사용자 정보 가져오기
를 요청
STEP3. 사용자 로그인
처리
04. 구현 및 개발
4-3 API 기능 구현 (Login API)
12
3
DEBEC DEPARTMENTSTORE
04. 구현 및 개발
4-3 API 기능 구현 (Login API)
DB에 연결하여 사용자의 회원번호 및 정보 조회
서비스 회원인지 확인 결과에 따라 서비스 로그인 또는 회원가입
STEP3. 사용자 로그인
처리
DEBEC DEPARTMENTSTORE
M
STEP3. 사용자 로그인
처리
04. 구현 및 개발
4-3 API 기능 구현 (Login API)
DEBEC DEPARTMENTSTORE
PC M
4-4 데이터베이스 설계 (MySQL)
회원정보
회원번호
int
󲇪11󲇫
아이디
char󲇪15󲇫
비밀번호
char󲇪15󲇫
이메일
char󲇪255󲇫
이름
char󲇪80󲇫
닉네임
char󲇪20󲇫
주소
char󲇪255󲇫
기본키
04. 구현 및 개발
데이터 베이스 구조 phpmyadmin
DEBEC DEPARTMENTSTORE
PC M
Form 태그의 action속성이 “member_insert.php” 로 연결되어 있기 때문에 ,
가입하기 버튼을 클릭하면 Form 데이터를 POST형식으로 member_insert.php로 보냄
04. 구현 및 개발
4-5 백엔드 기능 구현 (PHP)
회원가입 구현 1 회원가입 폼
DEBEC DEPARTMENTSTORE
PC M
회원가입 구현2
MySQL Insert 명령어로 데이터를 해당 테이블에
삽입
사용자가 입력한 값을 php변수에 저장 후 DB에
연결
04. 구현 및 개발
4-5 백엔드 기능 구현 (PHP)
DB에 값이 추가되면, index.php로 이동
Þ회원정보 수정 완료
DEBEC DEPARTMENTSTORE
PC M
로그인 구현1 로그인 폼
form 데이터를 POST형식으로
login.php로 보냄
04. 구현 및 개발
4-5 백엔드 기능 구현 (PHP)
DEBEC DEPARTMENTSTORE
PC M
로그인 구현 2
DB에 접속해서, POST형식으로 받은 데이터와 비교
ID 존재여부 판단, $num_match가 값을 가지면 DB에 존재
04. 구현 및 개발
4-5 백엔드 기능 구현 (PHP)
DEBEC DEPARTMENTSTORE
PC M
로그인 구현 2
DB에 ID가 존재하고, PW가 일치할 경우 로그인 완료
04. 구현 및 개발
4-5 백엔드 기능 구현 (PHP)
DEBEC DEPARTMENTSTORE
PC M
회원정보 수정 1
ID를 GET 형식으로 보냄
04. 구현 및 개발
4-5 백엔드 기능 구현 (PHP)
수정 버튼을 클릭하면
Form 데이터의 ID를 GET형식으로
member_insert.php로 보냄
DEBEC DEPARTMENTSTORE
PC M
회원정보 수정 2
ID를 GET형식으로 받음
04. 구현 및 개발
4-5 백엔드 기능 구현 (PHP)
폼으로부터 GET형식으로 ID를 전달받고,
MySQL의 update 명령을 이용하여 해당 아이디를 가진
레코드의 정보를 수정
DB의 수정이 완료되면, index.php로 이동
Þ회원정보 수정 완료
DEBEC DEPARTMENTSTORE
PC M
04. 구현 및 개발
4-5 백엔드 기능 구현 (PHP)
관리자페이지 구현 1
로그인 한 사용자의 회원 레벨을 의미하는
세션 변수를 가져와서 $userlevel에 저장
회원 레벨을 의미하는 $userlevel이 1이면,
관리자 페이지 메뉴를 삽입
DEBEC DEPARTMENTSTORE
PC M
04. 구현 및 개발
4-5 백엔드 기능 구현 (PHP)
관리자페이지 구현 2
While 반복문을 이용해 DB의 데이터 값을 가져옴
DEBEC DEPARTMENTSTORE
PC M
04. 구현 및 개발
4-5 백엔드 기능 구현 (PHP)
관리자페이지 구현 3
Form 태그의 action속성이 admin_update.php로 연결되어 있기 때문에, 수정 버튼을 클릭하면 admin_update.php로 이동
삭제 버튼의 경우, onclick으로 연결된 admin_delete.php로 이동
DEBEC DEPARTMENTSTORE
PC M
04. 구현 및 개발
4-5 백엔드 기능 구현 (PHP)
관리자페이지 구현 3
회원 정보 변경 (admin_update.php)
수정하고자 하는 레코드 번호를
GET방식으로 전달 받음
MySQL의Update 명령어를 이용해
수정하고자 하는 회원 정보 업데이트
DB업데이트를 종료하면 Admin.php로 이동
=>회원 정보 변경 완료
DEBEC DEPARTMENTSTORE
PC
04. 구현 및 개발
4-5 백엔드 기능 구현 (PHP)
관리자페이지 구현 3
회원 정보 삭제 (admin_delete.php)
MySQL의Delete 명령어를 이용해
삭제하고자 하는 회원 정보 삭제
그 외 과정은 회원 정보 변경하는 것과 동일
05. 프로젝트 수행
결과
DEBEC DEPARTMENTSTORE
5-1 최종 구현 영상
05. 프로젝트 수행 결과
https://youtu.be/kx8r9N6uTFI
DEBEC DEPARTMENTSTORE
5-2 최종 구현 홈페이지
http://siss9898.ivyro.net/DEBEC/
05. 프로젝트 수행 결과